<template>
  <div class="view">
    <el-container class="el-container">
      <el-header>
        <header>
          <div class="left">
            <img src="../../../public/1.gif" alt="">
            <span>
              <h3>电商订单管理</h3>
            </span>
          </div>
          <img src="../../../public/2.gif" class="img" alt="" />
          <img src="../../../public/3.gif" class="img" alt="" />
          <img src="../../../public/4.gif" class="img" alt="" />
          <img src="../../../public/5.gif" class="img" alt="" />
          <img src="../../../public/6.gif" class="img" alt="" />
          <img src="../../../public/7.gif" class="img" alt="" />
          <el-button class="button" type="info" @click="tui">退出</el-button>
        </header>
      </el-header>
      <el-container class="el-container11">
        <el-aside class="el-aside">
          <p @click="close" class="collapse">| | |</p>
          <el-col :span="12" class="el-cola">
            <el-menu active-text-color="#000" class="el-menu-vertical-demo" text-color="#ccc" router
              :collapse="collapse" unique-opened="true">
              <el-sub-menu :index="item.id + ''" v-for="(item, index) in list" :key="index">
                <template #title>
                  <el-icon>
                    <component :is="iconModel[item.id]"></component>
                  </el-icon>
                  <span>{{ item.authName }}</span>
                </template>
                <el-menu-item-group class="subMenu">
                  <el-menu-item :index="chlid.path" v-for="(chlid, key) in item.children" :key="key">{{ chlid.authName
                  }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main class="el-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { ref, reactive, toRefs,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Menulist } from '../../api/login'
export default {
  setup(props) {
    const router = useRouter()
    const tui = () => {
      router.push('/login')
      sessionStorage.removeItem('token')
    }
    const data = reactive({
      list: [],
      collapse: false,
      iconModel: {
        125: 'Document',
        103: 'Brush',
        101: 'Briefcase',
        102: 'Collection',
        145: 'Collection',
      }
    })
    Menulist(data.list).then(res => {
      console.log(res.data);
      localStorage.setItem('menusList',JSON.stringify(res.data))
      data.list = [
        ...res.data,
        {
          authName:"dialog",
          path:'reports',
          children:[{authName:'弹框',path:'dialog'}]
        }
      ]
    })
    const close = () => {
      if (data.collapse) {
        data.collapse = false
      } else {
        data.collapse = true
      }
    }
    return {
      ...toRefs(data),
      tui,
      close
    }
  },
}
</script>
<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;

  ::v-deep .el-cola {
    max-width: 100% !important;
    width: 200px;

    .el-menu-vertical-demo {
      background: #eb7e8c;

      .subMenu {
        background: #eb7e8c;
      }
    }
  }

  ::v-deep .el-container {
    height: 100%;
    width: 100%;
  }

  ::v-deep .el-aside {
    height: 100% !important;
    width: 200px !important;
    background: #eb7e8c;

    .collapse {
      background: #7474bf;
      text-align: center;
      margin: 0;
      line-height: 30px;
      color: #fff;
    }
  }

  ::v-deep .el-main {
    height: 100% !important;
    width: 200px !important;
    background: #e3fafa;

  }
}

header {
  width: 100%;
  height: 60px;
  background-image: linear-gradient(to right, #348ac7, #7474bf);
  flex-shrink: 0; //缩小比例
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  padding-left: 20px;

  img {
    height: 100%;
    width: 70px;
  }

  .button {
    margin-right: 50px;
    background: #fff;
    color: #ccc;
  }

  .left {
    display: flex;
    align-items: center;

    span {
      color: #fff;
      font-size: 20px;
      padding-left: 15px;
      font-family: STCaiyun;
    }
  }
}
</style>
